<template>
  <div class="top-nav">
    <div v-for="tab in openTabs" :key="tab.name" class="tab" :class="{ active: tab.path === $route.path }"
    @mouseenter="hover = true"
    @mouseleave="hover = false"
    :style="{ 'cursor': hover ? 'pointer' : 'default' }">
      <span @click="navigate(tab.path)">{{ tab.name }}</span>
      <span class="el-icon-close" @click="closeTab(tab)"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TopNav',
  data() {
    return {
      openTabs: [],
      hover:false,
      name:''
    };
  },
  methods: {
    navigate(path) {
      this.$router.push(path);
      this.$emit('update-active', path);    //通知父组件update-active事件，传递路由路径给事件
    },
    closeTab(tab) {
      this.openTabs = this.openTabs.filter(t => t !== tab);
      this.$router.push(this.openTabs[0].path);
    },
    addTab(tab) {
      if (!this.openTabs.find(t => t.path === tab.path)) {
        this.openTabs.push(tab);
      }
    }
  },
  watch: {
    $route(to) {
      // console.log(to)
      this.$emit('update-active', to.path);
      // const tab = { name: to.query.name, path: to.path };
      // if(tab.path!='/home')
      //   this.addTab(tab)
      switch(to.path){
        case '/center':
          this.name='个人中心'
          break
        case '/index':
          this.name='首页'
          break
        case '/bake':
          this.name='烘烤'
          break
        case '/welding':
          this.name='封口焊'
          break
        case '/detection':
          this.name='二次氦检'
          break
        case '/alarmhistory':
          this.name='报警信息'
          break
        case '/alarmhistory1':
          this.name='报警信息(清洗)'
          break
        default:
          break
      }
      const tab = { name: this.name, path: to.path }
      // console.log(this.openTabs)
      this.addTab(tab)
    }
  }
};
</script>
<style scoped>
.top-nav {
  display: flex;
  /* background-color: #f0f0f0; */
  /* padding: .625rem; */
  /* border-bottom: .0625rem solid silver; */
  height: 100%;
  font-size: .875rem;
}
.tab {
  margin-right: .3125rem;
  /* background-color: #e0e0e0; */
  padding: .75rem;
  border: .0625rem solid silver;
  border-radius: .125rem;
  display: flex;
  align-items: center;
}
.tab.active {
  background-color: #409EFF;
  color: white;
}
.el-icon-close{
  margin: .125rem 0 0 .5rem;
  padding: .125rem;
  border-radius: 50%;
  transition: background-color 0.3s;   /* 添加平滑过渡效果，使背景色的变化更加自然 */
}
.el-icon-close:hover {
  /* 鼠标悬停时的背景色和效果 */
  /* background-color: rgba(0, 0, 0, 0.1); */
  background:silver
}
</style>